<template>
	<view class="bgc">
		<view class="content">
			<u-sticky offset-top="0">
				<view class="infoimg" :style="{height:`${barHeight}px`}">
					<view class="infoitem" :style="{paddingTop: `${barHeight-24}px`}">
						<img mode="fade" class="imags" src="@/static/images/logtxt.png" alt="">
					</view>
				</view>
			</u-sticky>
			<view class="contentbox">
				<view class="content"></view>
			</view>
			<view>
				<!-- 绘画馆知识库 -->
				<view class="drawtab">
					<view class="flexgrid">
						<view class="tab1" @click="tonewbie">
							<view class="tableft">
								<view class="title">新手专区</view>
								<view class="subtitle">补充说明补充</view>
							</view>
							<view class="tableright">
								<img class="imgs" src="@/static/images/new.png" alt="">
							</view>
						</view>
						<view class="tab1" @click="tovideo">
							<view class="tableft">
								<view class="title">健康课堂</view>
								<view class="subtitle">补充说明补充</view>
							</view>
							<view class="tableright tableleft">
								<img class="imgs" src="@/static/images/student.png" alt="">
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="comehome">
				<view class="comeinfo">
					<view class="family">Hey 欢迎回来！</view>
					<view class="sufamily">宠物万能知识库，问啥找我就对了～</view>
				</view>
			</view>
			<view class="fothey">
				<view class="heyicon">
					<img class="heyimg" src="@/static/images/hey.png" alt="">
				</view>
				 <view class="sbuinput">
					 <up-input
					 shape='circle'
						border="none"
					   placeholder="有问题尽管问我～"
					   v-model="value"
					 ></up-input>
				 </view>
			</view>
		</view>
	</view>
</template>


<script>
	import mixins from "@/pages/mxin/mxin.js"
	export default {
		data() {
			return {
				statusBarHeight:0,
				barHeight:0,
				value:'',
			}
		},
		onShow() {
			let that = this
			uni.getSystemInfo({
				success(e) {
					that.statusBarHeight = e.statusBarHeight;
					const {
						top,
						height
					} = wx.getMenuButtonBoundingClientRect()
					console.log(top, height, that.statusBarHeight, 'test')
					that.barHeight = height ? height + that.statusBarHeight + 10 : 38
				}
			})
		},
		onLoad() {},
		methods: {
			tonewbie(){
				uni.navigateTo({
					url:"/petknowledgeinfo/newbie"
				})
			},
			tovideo(){
				uni.navigateTo({
					url:"/petknowledgeinfo/konvideo"
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.fothey{
		position: fixed;
		bottom: 0rpx;
		display: grid;
		padding: 16rpx 30rpx;
		background: #fff;
		grid-template-columns: 150rpx calc(100vw - 210rpx);
		.heyicon,.heyimg{
			display: block;
			width: 112rpx;
			height: 56rpx;
		}
		.heyicon{
			padding-right: 36rpx;
		}
		.heyimg{
			margin-top: 25rpx;
		}
		.sbuinput{
			background: #F7F7F7;
			border-radius: 50rpx;
			padding: 25rpx 10rpx 25rpx 50rpx;
		}
	}
	.comehome{
		padding: 78rpx 30rpx 0rpx 30rpx;
		.comeinfo{
			padding: 0rpx 30rpx;
			background: #fff;
			border-radius: 24rpx;
			.family{
				height: 32rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 32rpx;
				padding-top: 55rpx;
			}
			.sufamily{
				height: 28rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #858585;
				line-height: 28rpx;
				padding-top: 30rpx;
				padding-bottom: 55rpx;
			}
		}
	}
	.flexgrid{
		display: grid;
		padding: 60rpx 30rpx 0rpx 30rpx;
		grid-template-columns: auto auto;
		grid-gap: 0rpx 18rpx;
	}
	.tab1{
		display: flex;
		border: 1rpx solid #DEA89C;
		background: #F7ECE5 ;
		border-radius: 24rpx;
		.tableft{
			padding: 53rpx 30rpx;
			.title{
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #333333;
				letter-spacing: 0;
				line-height: 32rpx;
				font-weight: 600;
				text-align: left;
			}
			.subtitle{
				padding-top: 20rpx;
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #858585;
				letter-spacing: 0;
				line-height: 32rpx;
				font-weight: 400;
			}
		}
		.tableright{
			display: flex;
			align-items: center;
			position: relative;
			.imgs{
				position: absolute;
				left: -20rpx;
				width: 128rpx;
				height: 128rpx
			}
		}
		.tableleft{
			.imgs{
				position: absolute;
				left: -25rpx;
				width: 128rpx;
				height:128rpx;
			}
		}
	
	}
	.infoimg {
		width: 100%;
		background-image: url("https://pet-oss-bucket.oss-cn-beijing.aliyuncs.com/pet/2023/10/14/bg1_20231014083554A001.png");
		background-size: 100% auto;

		.infoitem {
			padding-left: 31rpx;

			.imags {
				width: 215rpx;
				height: 48rpx;
			}
		}
	}

	.contentbox {
		background: #dea89c;
		height: 40rpx;
		padding-top: 20rpx;
	}

	.content {
		height: 40rpx;
		background-image: url("@/static/images/bg2.png");
		background-size: 100% auto;
		position: relative;
		// top: -20rpx;
		// bac
		// height: 500vh;
	}
	.bgc{
		min-height: 100vh;
		background: #F7F7F7;
	}
</style>